@import '../../../core/application.less';
@import '../../../core/animate.less';
@import '../../../core/index.less';

.orin-p-login-root {
    padding: 0;
    margin: 0;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#303030), to(#101010));
    .loading {
        z-index: 999;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: @white;
        opacity: 0.7;
    }
    .login-mask-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .logo-wrapper {
            position: absolute;
            top: 20/@remScale;
            left: 20/@remScale;
            .logo {
                color: @white;
                height: 40/@remScale;
                width: 130/@remScale;
            }
        }
        .login-input-wrapper {
            width: 460/@remScale;
            background: @white;
            border-radius: 6/@remScale;
            padding: 40/@remScale;
            .login-title {
                font-size: 40/@remScale;
                text-align: center;
                margin-bottom: 30/@remScale;
                color: #202020;
            }
            .form-input {
                flex: 1;
                border-radius: 0;
                height: 50/@remScale;
                margin-bottom: 10/@remScale;
                border-radius: 4/@remScale;
            }
            .login-btn {
                height: 40/@remScale;
                border-radius: 4/@remScale;
                width: 100%;
                margin-top: 30/@remScale;
                background: #202020;
                .btnDarkenHover(#202020);
            }

        }
    }
}